/**
*@Author: QWP
*@Description: 提示框暂时
*@Date 2024-08-29 13:33
*/

interface _IFieldsNames {
  label?: string,
  value?: string,
  [key: string]: any
}

interface _Data {
  data: any[],
  props: _IFieldsNames,
  container: string | HTMLElement,
}

let preParent: HTMLElement | null = null;
let preChild: HTMLElement | null = null;
export const useToolTip = (data1: _Data) => {
  const { container } = data1;

  const parent = getParent(container)
 
  const childEl = createChild(data1)

  try {
    parent.addEventListener('mouseleave', () => {
      parent.removeChild(childEl)
    })
  } catch (error) {}

  preParent = parent;
  preChild = childEl;

  return parent.appendChild(childEl)
}

const getParent = (container: string | HTMLElement): HTMLElement => {
  if(typeof container == "string") {
    try {
      let el = document.getElementById(container) as HTMLElement
      if(el) {
        return el
      }
    } catch (error) {}

    try {
      let els = document.getElementsByClassName(container);
      if((els || []).length > 0) {
        return els[0] as HTMLElement
      }
    } catch (error) {}
  }
  else {
    return container as HTMLElement
  }
  return document.body
}

const createChild = (data1: _Data): HTMLElement => {
  const { data, props } = data1;
  const { label }  = props
  let box = document.createElement('div');
  box.classList.add('u-box-tool-tip-card');
  box.style.position = "absolute";
  box.style.zIndex = "200";
  box.style.bottom = "26px";
  box.style.left = "-80px";
  box.style.padding = "4px";
  box.style.width = "80px";
  box.style.textAlign = "center";
  box.style.borderRadius = "6px";
  box.style.background = "#E7F4FF";
  box.style.color = "#1890FF";

  for(let i = 0; i < data.length; i++) {
    let row = document.createElement('div');
    row.innerText = data[i][label] || '';
    row.style.padding = "4px"
    box.appendChild(row)
  }
  return box
}